<template>
  <view class="container">
    <!-- 头部背景图 -->
    <image src="/sub_shop/static/images/swiperbgc.png" mode="" class="swiperbgc"></image>
    <!-- 头部搜索组件 -->
    <headerCom style="position: absolute; top: 50rpx">
      <template #sort>
        <image src="/sub_shop/static/images/sort.png" mode="" style="width: 38rpx; height: 38rpx; margin-left: 100rpx"></image>
      </template>
    </headerCom>
    <!-- 内容区域 -->
    <view class="title">投诉原因</view>
    <!-- 投诉内容 -->
    <view style="position: relative">
      <textarea @blur="bindTextAreaBlur" class="tousutext" placeholder="请输入..." maxlength="150" v-model="reasontext" />
      <view class="textnum">{{ reasontext.length }} / 150</view>
    </view>
    <!-- 投诉的图片 -->
    <view class="tousuimage">
      <view class="uploadtitle">相关照片（1-9张）</view>
      <uploadimg></uploadimg>
    </view>
    <!-- 底部组件 -->
    <footerCom style="position: fixed; bottom: 0"></footerCom>
    <!-- 解决固定定位的覆盖问题 -->
    <view style="position: relative; bottom: 0; width: 750rpx; height: 98rpx"></view>
  </view>
</template>

<script>
import headerCom from '@/components/headersearch/headersearch.vue';
import footerCom from '@/components/shopfooter/shopfooter.vue';
import uploadimg from './components/upload.vue';
export default {
  components: {
    headerCom,
    footerCom,
    uploadimg
  },
  data() {
    return {
      reasontext: ''
    };
  }
};
</script>

<style lang="less" scoped>
.container {
  box-sizing: border-box;
  .swiperbgc {
    width: 750rpx;
    height: 176rpx;
  }
  .title {
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #222222;
    margin: 42rpx 0 0 32rpx;
  }
  .tousutext {
    width: 694rpx;
    height: 326rpx;
    background: #ffffff;
    margin: 14rpx 28rpx 74rpx 28rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }
  .tousuimage {
    box-sizing: border-box;
    margin-left: 28rpx;
    width: 694rpx;
    background: #ffffff;
    padding: 24rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    .uploadtitle {
      box-sizing: border-box;
      font-size: 30rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      margin: 24rpx 22rpx;
      color: #222222;
    }
  }
  .textnum {
    position: absolute;
    right: 60rpx;
    bottom: 30rpx;
  }
}
</style>
